<!-- 我的砍价 -->
<template>
    <view class="myPage">
        <status-bar title='我的砍价' :goHome='fromShare'></status-bar>
        <view class="classNav flexac bgwhite" :style="{top: totalHeight+'px'}">
            <u-tabs :list="tabList" :lineColor="color" lineWidth="30" @click="tabClick" itemStyle="height: 50px;"
                :inactiveStyle="{color:'#777',fontSize:'30rpx',transform:'scale(1)'}"
                :activeStyle="{color:'#444',fontSize:'30rpx',fontWeight:'bold',transform:'scale(1.2)'}"></u-tabs>
        </view>
        <view class="p-top150 p-left30 p-right30" v-if="list.length">
            <view class="item bgwhite bor_radius_6 m-bot30 padding20 d-flex" v-for="(item,index) in list" :key="index"
                @click="toUrl('/activityPage/bargain/bargainDetail?record_id='+item.record_id)">
                <image :src="$imgUrls(item.img)" mode="aspectFill" class="img"></image>
                <view class="padding12-30 flex-1">
                    <view class="size30 color_22 ellipsis">{{ item.name }}</view>
                    <!-- 砍价中 -->
                    <view class="m-top14" v-if="status == 0">
                        <!-- 倒计时 -->
                        <u-count-down :time="item.left_time" @change="onChange($event, item)">
                            <view class="d-flex a-center">
                                <view class="count" v-if="item.timeData.days">{{ item.timeData.days }}</view>
                                <text class="dot size22" v-if="item.timeData.days">天</text>
                                <view class="count">{{ item.timeData.hours<10?'0'+item.timeData.hours:item.timeData.hours }}</view>
                                <text class="dot">:</text>
                                <view class="count">{{ item.timeData.minutes<10?'0'+item.timeData.minutes:item.timeData.minutes }}</view>
                                <text class="dot">:</text>
                                <view class="count">{{ item.timeData.seconds<10?'0'+item.timeData.seconds:item.timeData.seconds }}</view>
                                <text class="size22 color_44 m-left14">后砍价过期</text>
                            </view>
                        </u-count-down>
                        <view class="m-top14 m-bot14">
                            <u-line-progress :percentage="parseFloat(item.percent)" inactiveColor="#FFDBDE" height="7" :showText="false"></u-line-progress>
                        </view>
                        <view class="size22 color_44">
                            已砍<text class="price bold p-left6 p-right6">{{ item.bargain_money }}</text>元，还差
                            <text class="price bold p-left6 p-right6">{{ item.need_bargain }}</text>元好礼带回家
                        </view>
                    </view>
                    <!-- 已成功 -->
                    <view class="m-top20" v-if="status == 1">
                        <u-line-progress :percentage="parseFloat(item.percent)" inactiveColor="#FFDBDE" height="7" :showText="false"></u-line-progress>
                        <view class="h6 bold m-top20 m-bot10" style="color: #810000;">{{ item.use == 1 ? '已成功领取' : '砍价已成功' }}</view>
                        <view class="d-flex j-sb a-center">
                            <view class="size22 color_44">砍价成功，免费好礼带回家</view>
                            <view class="btn bor_radius_6 size22 white text-center" @click.stop="btnClick(item)"
                                >{{ item.use == 1 ? '查看订单' : '点击领取' }}</view>
                        </view>
                    </view>
                    <!-- 已失败 -->
                    <view class="p-top24" v-if="status == 2">
                        <view class="h6 m-bot20" style="color: #F73F3F;">很遗憾，砍价因超时失败</view>
                        <u-line-progress :percentage="parseFloat(item.percent)" inactiveColor="#FFDBDE" height="7" :showText="false"></u-line-progress>
                    </view>
                </view>
            </view>
        </view>

        <empty v-if="noData" cat='3' msg='您还没有相关记录哦'></empty>
    </view>
</template>

<script>
import { mapState } from 'vuex'
export default {
    data(){
        return {
            status: '0',
            list: [],
            page: 1,
            limit: 10,
            noData: false,
            noMore: false,
            fromShare: 0,
            tabList: [
                { name: '砍价中', status: '0' },
                { name: '已成功', status: '1' },
                { name: '已失败', status: '2' }
            ]
        }
    },
    computed: {
        ...mapState(['color','totalHeight'])
    },
    onShow(){
        this.getList()
    },
    methods: {
        getList(){
            this.$http.get({
                url: '/BargainApi/myBargainRecord',
                data: {
                    status: this.status,
                    page: this.page,
                    limit: this.limit
                }
            }).then(res=>{
                let result = res.data || []
                result = result.map(item=>({...item, timeData: {}}))
                this.list = this.page == 1 ? result : this.list.concat(result)
                if(result.length < this.limit) this.noMore = true
                if(this.list.length){
                    this.noData = false
                } else {
                    this.noData = true
                }
            })
        },
        tabClick({status}){
            this.status = status
            this.page = 1
            this.noMore = false
            this.getList()
        },
        btnClick(item){
            if(item.use == 1){ // 查看订单
                this.toUrl('/pages/index/orderList')
            } else {
                if(item.order_id && item.order_id != 0){ // 未支付
                    this.toUrl('/orderPage/order/orderDetail?order_id=' + item.order_id)
                    return 
                }
                // 创建订单
                let params = `?goods_id=${item.goods_id}&goods_num=1&record_id=${item.record_id}`
                this.toUrl('/orderPage/order/createOrders' + params)
            }
        },
        onChange(e, item){
            item.timeData = e
        }
    },
    onReachBottom(){
        if(this.noMore) return
        this.page ++ 
        this.getList()
    }
}
</script>

<style lang="scss" scoped>
.myPage {
    padding-bottom: calc(30rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
}
.classNav {
    position: fixed;
    left: 0;
    z-index: 10;
    width: 100%;
}
.item {
    width: 100%;
    height: 220rpx;
    box-shadow: 4rpx 4rpx 13rpx 1rpx rgba(0,0,0,0.13);
    .img {
        width: 180rpx;
        height: 180rpx;
    }
    .count {
        width: 34rpx;
        line-height: 34rpx;   
        background: #FFD0A0;
        color: #810000;
        font-weight: bold;
        text-align: center;
    }
    .dot {
        font-size: 28rpx;
        color: #810000;
        font-weight: bold;
        margin: 0 10rpx;
    }
    .price {
        color: #FF464E;
    }
    .btn {
        width: 100rpx;
        line-height: 36rpx;    
        background: linear-gradient(-90deg, #F41C26, #FFA35E);
    }
}
::v-deep .u-line-progress__line {
    background: linear-gradient(-90deg, #F41C26, #FFB47B);
}
</style>